<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/datatable/datatable/datatables.min.css">
    <link rel="stylesheet" href="../static/fileinput/css/fileinput.min.css">
    <link rel="stylesheet" href="../static/datatime/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../static/datatable/datatable/DataTables-1.10.18/css/dataTables.bootstrap.min.css">
    <script src="../static/jq/jquery-3.2.1.js"></script>
    <script src="../static/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/datatable/datatable/datatables.min.js"></script>
    <script src="../static/bootbox/bootbox.min.js"></script>
    <script src="../static/datatime/bootstrap-datetimepicker.min.js"></script>
    <script src="../static/fileinput/js/fileinput.min.js"></script>
    <script src="../static/fileinput/js/locales/zh.js"></script>
    <script src="../static/datatime/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../static/datatable/datatable/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
    <script src="../static/js/dateFormat.js"></script>
</head>
<body>


<div class="row">
    <button type="button" class="btn btn-primary" onclick="addProduct();">
        <span  class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        增加商品
    </button>
    <button type="button" class="btn btn-primary" onclick="queryCart();">
        购物车信息
    </button>

    <div class="panel panel-info">
        <div class="panel-heading">
            商品列表
        </div>
        <div class="panel-body">
            <table id="productloyeeTable" class="table table-striped table-bordered" style="width:100%">
            </table>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">

    $(function (){
        initProductTable();
    })
    var productTable;

    function initProductTable(){
        productTable=$("#productloyeeTable").dataTable({
            "lengthChange":true,
            "lengthMenu":[5,10,15,20],
            "paging":true,
            "processing":true,
            "searching":false,
            "serverSide":true,
            "ajax":{
                "url":"/ProductController/queryProductPageList",
                "dataSrc":function(result){
                    return result.data;
                }
            },
            "columns":[
                {"data":"productId","title":"<input type='checkbox' name='checklist' id='checkall'/>选择",width:'10%',
                    render:function(data,type,row,meta){
                        return "<input type='checkbox' name='id' value='"+data+"'/>";
                    }
                },
                {"data":"productName","title":"商品名称"},
                {"data":"productPrice","title":"商品价格"},
                {"data":"productImage","title":"商品图片",
                    render:function(data,type,row,meta){
                        return "<img src='http://192.168.0.157:9093"+data+"' class='img-circle' width='80px'>";
                    }
                },
                {"title":"操作"}
            ],
            "columnDefs":[{
                //指定最后一列
                "targets":4,
                render:function(data,type,row,meta){
                    var buttons="";
                    buttons+='<a type="button" href="javascript:;" onclick="delProduct(\''+row.productId+'\')" >删除</a>&nbsp&nbsp&nbsp&nbsp';
                    buttons+='<a type="button" href="javascript:;" onclick="updateProduct(\''+row.productId+'\')">修改</a>&nbsp&nbsp&nbsp&nbsp';
                    buttons+='<a type="button" href="javascript:;" onclick="addCart(\''+row.productId+'\')">加入购物车</a>';
                    return buttons;
                }
            }],

            //表格重新绘制需要回调函数
            "fnDrawCallback":function(oSettings){

            },
            //表格加载成功后的回调函数
            "fnInitComplete":function(oSettings,json){

            },
            "language":{
                "url":"../static/datatable/datatable/Chinese.json"
            }
        })
    }



    function addProduct(){
        bootbox.dialog({
            size:"largod",
            title:"增加商品",
            message:$("#addProductTable").html(),
            buttons:{
                confirm:{
                    label:"保存",
                    className:"btn-success",
                    callback:function(){
                        var productName=$("#add_productName").val();
                        var productPrice=$("#add_productPrice").val();
                        var largeClassId=$("#add_largeClassId").val();
                        var classifyId=$("#add_classifyId").val();
                        var childClassId=$("#add_childClassId").val();
                        var productImage=$("#add_productImage").val();
                        $.ajax({
                            url:"/ProductController/addProduct",
                            type:"post",
                            dataType:"json",
                            data:{
                                productName:productName,
                                productPrice:productPrice,
                                largeClassId:largeClassId,
                                classifyId:classifyId,
                                childClassId:childClassId,
                                productImage:productImage
                            },
                            success:function(result){
                                if (result.success) {
                                    bootbox.alert({
                                        size:"small",
                                        title:"保存商品",
                                        message:'<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>保存商品成功'
                                    });
                                    productTable.api().ajax.reload();
                                }
                            }
                        })
                    }
                },
                cancel:{
                    label:"取消",
                    className:"btn-danger"
                }
            }
        })
        queryLargeClassList();
        initProductPhoto();
    }
    function queryLargeClassList(){
        $.ajax({
            url:"/LargeClassController/queryLargeClassList",
            type:"post",
            dataType:'json',
            async:false,
            success:function(result){
                var str="";
                $.each(result.data, function(i,l) {
                    str+='<option  value='+l.largeClassId+'>'+l.largeClassName+'</option>'
                });
                $("#add_largeClassId").append(str);
            }
        })
    };

    function queryClassifyList(largeClassId) {
        $.ajax({
            url:"/ClassifyController/queryClassifyList",
            type:"post",
            dataType:'json',
            data:{
                largeClassId:largeClassId
            },
            async:false,
            success:function(result){
                var str="";
                str+='<option value="">---请选择---</option>';
                $.each(result.data, function(i,c) {
                    str+='<option  value='+c.classifyId+'>'+c.classifyName+'</option>'
                });
                $("#add_classifyId").html(str);
            }
        })
    }
    function queryChildClassList(classifyId) {
        $.ajax({
            url:"/ChildClassController/queryChildClassList",
            type:"post",
            dataType:'json',
            data:{
                classifyId:classifyId
            },
            async:false,
            success:function(result){
                var str="";
                str+='<option value="">---请选择---</option>';
                $.each(result.data, function(i,c) {
                    str+='<option  value='+c.childClassId+'>'+c.childClassName+'</option>'
                });
                $("#add_childClassId").html(str);
            }
        })
    }

    function initProductPhoto(previewArr){
        //图片上传工具
        $("#productPhotoInput").fileinput({
            uploadUrl:"/FileController/uploadFile",
            uploadAsync : true, //默认异步上传
            maxFileCount : 5, //表示允许同时上传的最大文件个数
            enctype : 'multipart/form-data',
            allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
            allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
            allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
            language : 'zh',
            initialPreview:previewArr,
            initialPreviewAsData:true,
            showRemove : false, //显示移除按钮,跟随文本框的那个
            showCaption : false,//是否显示标题,就是那个文本框
            layoutTemplates: {
                actionUpload: '',   //取消上传按钮
            }
        }).on("fileuploaded",function(event,data,previewld,index){
            if (data!=null && data.response.ok){
                $("#add_productImage").val(data.response.url);
            }
        })
    }

    function delProduct(productId) {
        bootbox.confirm({
            size:"small",
            message:"你确定删除该商品",
            buttons:{
                confirm:{
                    label:"删除",
                    className:"btn-success"
                },
                cancel:{
                    label:"取消",
                    className:"btn-danger"
                }
            },
            callback:function(result){
                if (result) {
                    $.ajax({
                        url:"/ProductController/delProductById",
                        type:"post",
                        data:{
                            productId:productId
                        },
                        dataType:"json",
                        success:function(result){
                            if (result.success) {
                                bootbox.alert({
                                    size:"small",
                                    title:"删除成功",
                                    message:'<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>删除商品成功'
                                });
                                productTable.api().ajax.reload();
                            }
                        }
                    })
                }
            }

        })
    }

    function updateProduct(productId){
        bootbox.dialog({
            size:"largod",
            title:"修改商品",
            message:$("#addProductTable").html(),
            buttons:{
                confirm:{
                    label:"保存",
                    className:"btn-success",
                    callback:function(){
                        var productName=$("#add_productName").val();
                        var productPrice=$("#add_productPrice").val();
                        var largeClassId=$("#add_largeClassId").val();
                        var classifyId=$("#add_classifyId").val();
                        var childClassId=$("#add_childClassId").val();
                        var productImage=$("#add_productImage").val();
                        $.ajax({
                            url:"/ProductController/updateProduct",
                            type:"post",
                            dataType:"json",
                            data:{
                                productId:productId,
                                productName:productName,
                                productPrice:productPrice,
                                largeClassId:largeClassId,
                                classifyId:classifyId,
                                childClassId:childClassId,
                                productImage:productImage
                            },
                            success:function(result){
                                if (result.success) {
                                    bootbox.alert({
                                        size:"small",
                                        title:"修改商品",
                                        message:'<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>修改商品成功'
                                    });
                                    productTable.api().ajax.reload();
                                }
                            }
                        })
                    }
                },
                cancel:{
                    label:"取消",
                    className:"btn-danger"
                }
            }
        });
        queryLargeClassList();

        //数据回显
        $.ajax({
            url:"/ProductController/queryProductById",
            type:"post",
            dataType:"json",
            data:{
                productId:productId
            },
            async:false,
            success:function(data){
                if (data.success) {
                    var product=data.data;
                    $("#add_productName").val(product.productName);
                    $("#add_productPrice").val(product.productPrice);
                    $("#add_largeClassId").val(product.largeClassId);
                    $("#add_productImage").val(product.productImage);
                    //回显分类
                    var classifyId=product.classifyId;
                    $.post("/ClassifyController/queryClassifyList",{"largeClassId":product.largeClassId},function (result) {
                        $.each(result.data, function(i,l){
                            var isselected = "";
                            if(l.classifyId==classifyId){
                                isselected += "selected";
                            }
                            $("#add_classifyId").append('<option value="' + l.classifyId + '"'+isselected+'>' + l.classifyName + '</option>')
                        });
                    });
                    //回显小类
                    var childClassId=product.childClassId;
                    $.post("/ChildClassController/queryChildClassList",{"classifyId":product.classifyId},function (result) {
                        $.each(result.data, function(i,l){
                            var isselected = "";
                            if(l.childClassId==childClassId){
                                isselected += "selected";
                            }
                            $("#add_childClassId").append('<option value="' + l.childClassId + '"'+isselected+'>' + l.childClassName + '</option>')
                        });
                    });


                    $("#add_childClassId").val(product.childClassId);

                    // var imgurl=product.imgurl;
                    // var imgurlArr=[];
                    // if (imgurl!=null && imgurl!="") {
                    //     imgurlArr.push("http://192.168.0.157:9093"+imgurl);
                    // }
                    // initProductPhoto(imgurlArr);
                }
            }
        })
        initProductPhoto();
    }

    function addCart(productId) {
        bootbox.prompt({
            title:"请选择数量",
            inputType:"number",
            size:"small",
            value:1,
            callback:function(result){
                if (result!=null){
                    if (result>0){
                            $.ajax({
                                url:"/ProductController/addCart",
                                type:"post",
                                data:{
                                    productId:productId,
                                    num:result
                                },
                                success:function(){

                                }
                            })
                    } else {
                        alert("商品数量必须大于0");
                    }
                }
            }
        })
    }

    function queryCart() {
        location.href="/ProductController/queryCart";
    }

</script>

<script type="text/html" id="addProductTable">
    <form class="form-horizontal" >
        <div class="form-group">
            <label  class="col-sm-2 control-label">商品名称:</label>
            <div class="col-sm-8" >
                <input type="text" class="form-control" id="add_productName" >
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">商品价格:</label>
            <div class="col-sm-8" >
                <input type="text" class="form-control" id="add_productPrice" >
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">商品类型:</label>
            <div class="col-sm-8" >
                <select id="add_largeClassId" class="form-control" onchange="queryClassifyList(this.value);">
                    <option value="">---请选择---</option>
                </select>
                <select id="add_classifyId" class="form-control" onchange="queryChildClassList(this.value);">
                    <option value="">---请选择---</option>
                </select>
                <select id="add_childClassId" class="form-control">
                    <option value="">---请选择---</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">商品图片</label>
            <div class="col-sm-8">
                <input id ="productPhotoInput" name ="productPhotoInput" type ="file"  multiple>
                <input id ="add_productImage" name ="add_productImage" type ="text" >
            </div>
        </div>
    </form>
</script>
</html>